/**
* @作者:陈博宇
* @创建时间：2021/7/7
* @修改时间：2021/7/10
* @修改时间：2021/7/23
*/

<template>
	<view class="main">
		<!-- 状态栏 -->
		<view class="header">
			<img src="/static/xiangzulogo.png" style="width: 160rpx; height: 90rpx;" fit="cover" class="logo">
			<view class="navitems">
				<el-badge :value="12" class="navitem" hidden>
					<view @click="jumptoLogIn">消息</view>
				</el-badge>
				<view class="navitem" @click="logOut">退出登录</view>
			</view>
		</view>
		<!-- 主界面 -->
		<view class="body">
			<!-- 侧边导航条 -->
			<el-tabs class="tabs" :tab-position="tabPosition" type="border-card">
				<!-- 已发布商品界面 -->
				<el-tab-pane label="我的商品">
					<div class="searchWord">
						<!-- 搜索框 -->
						<div style="display: inline-block"> 全局搜索：</div>
						<el-input v-model="search" style="display: inline-block;width: 200px" placeholder="请输入搜索内容">
						</el-input>
						<!-- 发布新商品 -->
						<el-button class="publish" type="primary" icon="el-icon-circle-plus-outline"
							@click="jumpToPublish">
							发布商品</el-button>
					</div>
					<!-- 商品列表 -->
					<div id="goods">
						<el-table :data="tables" border style="width: 100%; margin-top: 20px" height="625">
							<el-table-column prop="name" label="商品名" width="220" sortable>
							</el-table-column>
							<el-table-column prop="images" label="图片" width="100">
								<template slot-scope="scope">
									<img :src='"http://47.96.168.135:7388"+scope.row.src'
										style="width:60px;height:60px;" />
								</template>
							</el-table-column>
							<el-table-column prop="sort" label="类别">
							</el-table-column>
							<el-table-column prop="brand" label="品牌" width="120">
							</el-table-column>
							<el-table-column prop="paramete" label="配置">
								<template slot-scope="scope">
									<div>
										<ul>
											<li v-for="item in scope.row.paramete">
												{{ item.value }}
											</li>
										</ul>
									</div>
								</template>
							</el-table-column>
							<el-table-column prop="stock" label="库存" width="120">
								<template slot-scope="scope">
									<div>
										<ul>
											<li v-for="item in scope.row.paramete">
												{{ item.stock }}
											</li>
										</ul>
									</div>
								</template>
							</el-table-column>
							<el-table-column prop="price" label="日租" width="120">
								<template slot-scope="scope">
									<div>
										<ul>
											<li v-for="item in scope.row.paramete">
												¥{{ item.price }}
											</li>
										</ul>
									</div>
								</template>
							</el-table-column>
							<el-table-column prop="state" label="状态" width="100">
								<template slot-scope="scope">
									<el-tag :type="scope.row.type" effect="dark" disable-transitions>
										{{scope.row.state}}
									</el-tag>
								</template>
							</el-table-column>
							<el-table-column label="操作" align="center">
								<template slot-scope="scope">
									<el-button size="mini" @click="jumpToModify(scope.row.goodsId)">编辑</el-button>
									<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">
										下架
									</el-button>
								</template>
							</el-table-column>

						</el-table>
					</div>
				</el-tab-pane>
				<!-- 我的订单界面 -->
				<el-tab-pane label="我的订单" name="third">
					<!-- 搜索框 -->
					<div class="searchWord">
						<div style="display: inline-block"> 全局搜索：</div>
						<el-input v-model="search" style="display: inline-block;width: 200px" placeholder="请输入搜索内容">
						</el-input>
					</div>
					<!-- 订单列表 -->
					<view>
						<el-table :data="Orders" style="width: 100%; margin-top: 20px" height="625" border
							:header-cell-style="{background:'#F5F7FA',color:'#606266'}" default-expand-all>
							<el-table-column type="expand">
								<template slot-scope="props">
									<el-form label-position="left" inline class="demo-table-expand">
										<el-form-item label="租户姓名:">
											<span>{{ props.row.receiverName }}</span>
										</el-form-item>
										<el-form-item label="品牌:">
											<span>{{ props.row.brand }}</span>
										</el-form-item>
										<el-form-item label="日租:">
											<span>{{ props.row.dailyRent }}</span>
										</el-form-item>
										<el-form-item label="租赁开始时间:">
											<span>{{ props.row.startDate }}</span>
										</el-form-item>
										<el-form-item label="商品分类:">
											<span>{{ props.row.category }}</span>
										</el-form-item>
										<el-form-item label="配置:">
											<span>{{ props.row.paramete }}</span>
										</el-form-item>
										<el-form-item label="数量:">
											<span>{{ props.row.num }}</span>
										</el-form-item>
										<el-form-item label="租赁结束时间:">
											<span>{{ props.row.endDate }}</span>
										</el-form-item>
									</el-form>
								</template>
							</el-table-column>
							<el-table-column label="日期" prop="date">
							</el-table-column>
							<el-table-column label="订单ID" prop="id">
							</el-table-column>
							<el-table-column label="图片">
								<template slot-scope="scope">
									<img :src='"http://47.96.168.135:7388"+scope.row.src'
										style="width:50px;height:50px;" />
								</template>
							</el-table-column>
							<el-table-column label="商品名称" prop="name" width="240">
							</el-table-column>
							<el-table-column label="实付款" prop="pay" width="240">
								<template slot-scope="scope">
									<div>
										<div style="font-size: 18px;color: #ff3e3e;">
											¥{{scope.row.pay}}
										</div>
										<div style="font-size: 10px">
											(商品:¥{{scope.row.rent}}+押金:¥{{scope.row.deposit}})
										</div>
									</div>
								</template>
							</el-table-column>
							<el-table-column label="状态" prop="state" :filters="[{ text: '待发货', value: '待发货' }, { text: '待收货', value: '待收货' }, { text: '租赁中', value: '租赁中'
							}, { text: '待归还', value: '待归还' }, { text: '归还中', value: '归还中' }, { text: '已完成', value: '已完成' }]"
								:filter-method="filterTag" filter-placement="bottom-end">
								<template slot-scope="scope">
									<el-tag :type="scope.row.type" :effect="scope.row.effect" disable-transitions>
										{{scope.row.state}}
									</el-tag>
								</template>
							</el-table-column>
							<el-table-column label="操作">
								<template slot-scope="scope">
									<el-button size="mini" type="primary" @click="jumpToOrder(scope.row.id)">查看
									</el-button>
									<el-button size="mini" @click="jumpToOrder(scope.row.id)">编辑</el-button>
								</template>
							</el-table-column>
						</el-table>
					</view>
				</el-tab-pane>
				<!-- 地址界面 -->
				<el-tab-pane label="地址管理">
					<el-button type="primary" @click="addDialogVisible=true">添加地址</el-button>
					<!-- 添加地址对话框 -->
					<el-dialog title="添加地址" :visible.sync="addDialogVisible" width="47%" @close="addDialogClosed">
						<!-- 内容的主体区域 -->
						<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="95px">
							<el-form-item label="地址信息" prop="add" size="mini">
								<v-region :town="true" v-model="selected" @values="regionChange"></v-region>
							</el-form-item>
							<el-form-item label="详细地址" prop="detailAdd">
								<el-input type="textarea" v-model="ruleForm.detailAdd"></el-input>
							</el-form-item>
							<el-form-item label="收货人姓名" prop="name">
								<el-input v-model="ruleForm.name"></el-input>
							</el-form-item>
							<el-form-item label="手机号码" prop="phoneNumber">
								<el-input type="phoneNumber" v-model.number="ruleForm.phoneNumber" autocomplete="off">
								</el-input>
							</el-form-item>
						</el-form>
						<!-- 底部区域 -->
						<span slot="footer" class="dialog-footer">
							<el-button @click="addDialogVisible = false">取 消</el-button>
							<el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
						</span>
					</el-dialog>
					<!-- 地址列表 -->
					<view class="myAddress">
						<el-table :data="allAddressGet" border style="width: 100%; margin-top: 20px"
							@selection-change="handleSelectionChange" height="630">
							<el-table-column prop="receiverName" label="收货人" style="width: 10%;">
							</el-table-column>
							<el-table-column prop="province" label="所在地区">
								<template slot-scope="scope">
									<div>
										{{scope.row.province}}-{{scope.row.city}}-{{scope.row.town}}-{{scope.row.area}}
									</div>
								</template>
							</el-table-column>
							<el-table-column prop="detailInfo" label="详细地址" style="width: 10%;">
							</el-table-column>
							<el-table-column prop="phoneNum" label="手机号码">
							</el-table-column>
							<el-table-column label="操作" align="center">
								<template slot-scope="scope">
									<el-button size="mini" @click="showEditDialog(scope.row.id)">编辑</el-button>
									<el-button size="mini" type="danger" @click="addDelete(scope.row.id)">
										删除
									</el-button>
								</template>
							</el-table-column>
						</el-table>
					</view>
					<!-- 修改地址的对话框 -->
					<el-dialog title="修改地址" :visible.sync="editDialogVisible" width="47%" @close="editDialogClosed">
						<el-form :model="editAddForm" :rules="rules" ref="editAddFormRef" label-width="95px">
							<el-form-item label="地址信息" prop="editAdd" size="mini">
								<v-region :town="true" v-model="editAdd" @values="editRegionChange"></v-region>
							</el-form-item>
							<el-form-item label="详细地址" prop="detailAdd">
								<el-input type="textarea" v-model="editAddForm.detailAdd"></el-input>
							</el-form-item>
							<el-form-item label="收货人姓名" prop="name">
								<el-input v-model="editAddForm.name"></el-input>
							</el-form-item>
							<el-form-item label="手机号码" prop="phoneNumber">
								<el-input type="phoneNumber" v-model.number="editAddForm.phoneNumber"
									autocomplete="off">
								</el-input>
							</el-form-item>
						</el-form>
						<span slot="footer" class="dialog-footer">
							<el-button @click="editDialogVisible = false">取 消</el-button>
							<el-button type="primary" @click="editAddInfo">确 定</el-button>
						</span>
					</el-dialog>
				</el-tab-pane>
			</el-tabs>
		</view>
		<!-- 对话框 -->
		<el-drawer :visible.sync="drawer" :direction="direction" ref="drawer">
			<scroll-view class="main">
				<view v-for="item in friendlist" class="perRow" @click="jumptoChat(item.uuid,item.storeName)">
					<image :src='"http:////47.96.168.135:7388"+item.faceUrl' class="img"></image>
					<view class="text">{{item.name}}</view>
				</view>
			</scroll-view>
			<el-drawer :append-to-body="true" :visible.sync="innerDrawer" :before-close="handleClose" ref="drawer2">
				<view class="outer">
					<view class="uni-column">
						<view class="Drawerheader">{{name}}</view>
						<view class="content" id="content" :style="{height:style.contentViewHeight+'px'}">
							<scroll-view id="scrollview" scroll-y="true" :style="{height:style.contentViewHeight+'px'}"
								:scroll-with-animation="true" :scroll-top="scrollTop">
								<message-show v-for="(message,index) in pastrecord" :key="index"
									v-bind:message="message" :id="index"></message-show>
								<view id="bottom"></view>
							</scroll-view>
						</view>
						<view class="foot">
							<chat-input @send-message="getInputMessage"></chat-input>
						</view>
					</view>
				</view>
			</el-drawer>
		</el-drawer>
	</view>

</template>

<script>
	import chatInput from '../../components/chatinput.vue';
	import messageShow from '../../components/messageshow.vue';
	export default {

		onLoad() {
			if (!this.$cookies.isKey("shopId")) {
				this.$alert('您还未登录，请先登录！', '错误', {
					confirmButtonText: '确定',
				});
				uni.redirectTo({
					url: "ShopLoginIndex"
				})
			} else {
				//初始化websocket
				this.$websocket.dispatch('WEBSOCKET_INIT', "ws://47.96.168.135:5657/socket/" + this.$cookies.get(
					"shopuuid"));
				var that = this;
				//监听websocket
				uni.onSocketMessage(function(res) {
					var content = res.data.split("|")[0]
					var sender = res.data.split("|")[1]
					if (that.$cookies.get(sender) != null) {
						that.pastrecord = JSON.parse(that.$cookies.get(sender));
						that.$cookies.remove(sender)
					}
					that.pastrecord.push({
						user: "home",
						content: content,
						hasSub: false,
						subcontent: '',
					})
					that.$cookies.set(sender, JSON.stringify(that.pastrecord), "1h")
					that.$message({
						type: 'info',
						message: '有新消息！'
					});
					that.scrollToBottom();
				})
			}


		},
		components: {
			chatInput,
			messageShow
		},

		mounted: function() {
			// this.change();
			this.addmygoods();
			this.getOrder();
			this.getAddress();
			this.getlist()
		},
		created: function() {
			const res = uni.getSystemInfoSync();
			this.style.pageHeight = res.windowHeight;
			this.style.contentViewHeight = res.windowHeight - uni.getSystemInfoSync().screenWidth / 750 * (100); //像素
		},


		methods: {
			// 跳转到登录
			jumptoLogIn() {
				this.drawer = true;

			},
			handleClose(done) {
				this.pastrecord = [];
				done();
			},
			//获取消息界面输入框的输入数据
			getInputMessage: function(message) {
				this.addMessage('customer', message.content, false);
				this.postmessage(message.content);
			},
			//消息记录存入本地
			addMessage: function(user, content, hasSub, subcontent) {
				var that = this;
				if (this.$cookies.get(this.uuid) != null) {
					this.pastrecord = JSON.parse(this.$cookies.get(this.uuid))
					this.$cookies.remove(this.uuid)
				}
				this.pastrecord.push({
					user: user,
					content: content,
					hasSub: false,
					subcontent: subcontent
				})
				this.$cookies.set(this.uuid, JSON.stringify(this.pastrecord), "1h")

			},

			//移至消息界面底部
			scrollToBottom: function() {
				var that = this;
				var query = uni.createSelectorQuery();
				query.selectAll('.m-item').boundingClientRect();
				query.select('#scrollview').boundingClientRect();

				query.exec(function(res) {
					that.style.mitemHeight = 0;
					res[0].forEach(function(rect) {
						that.style.mitemHeight = that.style.mitemHeight + rect.height + 20;
					});

					if (that.style.mitemHeight > that.style.contentViewHeight) {
						that.scrollTop = that.style.mitemHeight - that.style.contentViewHeight;
					}
				});
			},
			//将输入消息发送到websocket服务器
			postmessage: function(info) {
				this.$websocket.dispatch("WEBSOCKET_SEND", info + "|" + this.$cookies.get("shopuuid") + "|" + this
					.uuid);
			},

			//获取消息界面好友列表
			async getlist() {
				await this.$axios({
					methods: 'get',
					url: '/Business/getAllCustomer?BusinessId=' + this.$cookies.get("shopId"),

				}).then(res => {
					this.friendlist = res.data.date
				})
			},
			//切换好友消息页面窗口
			jumptoChat(uuid, name) {
				this.uuid = uuid;
				this.name = name;
				this.innerDrawer = true
				var that = this
				this.friendlist.forEach(function(friend) {
					if (friend.uuid == uuid) {
						that.$cookies.set("senderimg", friend.faceUrl, "1h")
					}
				})
				if (this.$cookies.get(uuid) != null) {
					this.pastrecord = (JSON.parse(this.$cookies.get(uuid)))
				};
			},

			// 退出登录
			openLogOutWindow() {
				this.$confirm('确定要退出登录吗？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$cookies.remove("shopName")
					this.$cookies.remove("shopId")
					// location.reload()

					uni.navigateTo({
						url: "ShopLoginIndex"
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消退出登录'
					});
				});
			},
			logOut() {
				this.openLogOutWindow()
			},

			// 获取商家所有商品
			async addmygoods() {
				var that = this;
				await this.$axios({
					methods: 'get',
					url: '/Business/getSkuList?StoreName=' + this.$cookies.get("shopName"),
				}).then(res => {
					that.sku = res.data.date
				}).catch(err => {})
				this.sku.forEach((item, index) => {
					let current = {
						name: item.name,
						src: item.skuImages[0].url,
						sort: item.categoryName,
						brand: item.brandName,
						storeName: item.storeName,
						state: item.state,
						paramete: item.skuSpecificationOptions,
						type: '',
						id: item.id,
						goodsId: item.goodId,
					}
					switch (current.state) {
						case '未通过':
							current.type = 'danger';
							break;
						case '待审核':
							current.type = 'warning';
							break;
						case '已上架':
							current.type = 'success';
							break;
						case '已下架':
							current.type = 'info';
							break;
					}
					this.newTableData.push(current);
				})
			},
			// 跳转到修改商品界面
			jumpToModify(id) {
				this.$cookies.set("modifyGoodsId", id, "5s")
				uni.navigateTo({
					url: 'ModifyGoods'
				})
			},
			// 删除商品
			handleDelete(index, row) {
				this.$confirm('此操作将永久删除该商品, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$message({
						type: 'success',
						message: '删除成功!'
					});
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},

			filterTag(value, row) {
				return row.state === value;
			},
			// 监视地址输入框的变化
			regionChange(data) {
				this.ruleForm.add = data
			},
			// 添加地址
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.$axios({
							method: "post",
							url: "/Address/addAddress",
							data: {
								"area": this.ruleForm.add.area.value,
								"areaNum": this.ruleForm.add.area.key,
								"city": this.ruleForm.add.city.value,
								"cityNum": this.ruleForm.add.city.key,
								"businessId": this.$cookies.get("shopId"),
								"detailInfo": this.ruleForm.detailAdd,
								"phoneNum": this.ruleForm.phoneNumber,
								"province": this.ruleForm.add.province.value,
								"provinceNum": this.ruleForm.add.province.key,
								"receiverName": this.ruleForm.name,
								"town": this.ruleForm.add.town.value,
								"townNum": this.ruleForm.add.town.key,
							}
						}).then((res) => {
							this.$message.success('添加地址成功！')
							// 隐藏添加用户的对话框
							this.addDialogVisible = false;
							this.resetForm('ruleForm');
							// 重新获取用户列表数据
							this.getAddress();
						});
					} else {
						return false;
					}
				});
				this.resetForm('ruleForm');
			},
			// 充值输入框
			resetForm(formName) {
				this.$refs[formName].resetFields();
				this.selected.province = '';
				this.selected.city = '';
				this.selected.town = '';
				this.selected.area = '';
			},
			// 监听添加用户对话框的关闭事件
			addDialogClosed() {
				this.resetForm('ruleForm');
			},
			// 获取地址
			async getAddress() {
				var that = this;
				await this.$axios({
					methods: 'get',
					url: '/Address/getAllByBusinessName?BusinessName=' + this.$cookies.get("shopName"),
				}).then(res => {
					that.allAddressGet = res.data.date
				}).catch(err => {

				})
			},
			// 展示编辑地址的对话框
			showEditDialog(id) {
				this.allAddressGet.forEach((item, index) => {
					if (item.id === id) {
						this.editAdd.province = item.provinceNum;
						this.editAdd.city = item.cityNum;
						this.editAdd.town = item.townNum;
						this.editAdd.area = item.areaNum;
						this.editAddForm.detailAdd = item.detailInfo;
						this.editAddForm.name = item.receiverName;
						this.editAddForm.phoneNumber = item.phoneNum;
					}
				})
				this.editDialogVisible = true
			},
			resetEditForm(formName) {
				this.$refs[formName].resetFields();
			},
			// 监听修改地址对话框的关闭
			editDialogClosed() {
				this.$refs.editFormRef.resetFields()
			},
			// 获取商家所有订单
			async getOrder() {
				var that = this;
				await this.$axios({
					methods: 'get',
					url: '/Order/getOrdersByStoreName?StoreName=' + this.$cookies.get("shopName"),
				}).then(res => {
					that.allOrderGet = res.data.date
				}).catch(err => {})
				this.allOrderGet.forEach((item, index) => {
					let current = {
						date: item.orderDate,
						startDate: item.leaseStartTime,
						endDate: item.leaseEndTime,
						id: item.id,
						src: item.sku.skuImages[0].url,
						name: item.sku.name,
						brand: item.brandName,
						paramete: item.sku.skuSpecificationOptions[item.specificationIndex].value,
						dailyRent: item.sku.skuSpecificationOptions[item.specificationIndex].price,
						num: item.num,
						pay: item.sumOfMoney,
						rent: item.sumOfMoney,
						deposit: item.sku.skuSpecificationOptions[item.specificationIndex].deposit,
						state: item.state,
						type: '',
						effect: '',
						category: item.categoryName + '/' + item.channelName,
						receiverName: item.customerTemporaryAddress.receiverName,
					}
					switch (current.state) {
						case '待发货':
							current.type = 'warning';
							current.effect = 'dark';
							break;
						case '待收货':
							// current.type = 'warning';
							current.effect = 'dark';
							break;
						case '租赁中':
							current.type = 'success';
							// current.effect = 'dark';
							break;
						case '待归还':
							current.type = 'danger';
							current.effect = 'dark';
							break;
						case '已完成':
							current.type = 'success';
							current.effect = 'dark';
							break;
					}
					this.newAllOrderGet.push(current);
				})
			},
			// 跳转发布
			jumpToPublish() {
				uni.navigateTo({
					url: "PublishGoods"
				})
			},
			// 跳转订单详情
			jumpToOrder(id) {
				uni.navigateTo({
					url: "BusinessOrder?thatOrderId=" + id
				})
			},
		},

		data() {
			return {
				sku: [],
				name: '',
				uuid: '',
				style: {
					pageHeight: 0,
					contentViewHeight: 0,
					footViewHeight: 90,
					mitemHeight: 0,
				},
				scrollTop: 0,
				friendlist: [],
				pastrecord: [],
				innerDrawer: false,
				drawer: false,
				baseurl: 'http://47.96.168.135:7388',

				search: '',
				tabPosition: 'left',
				ruleForm: {
					name: '',
					add: '',
					detailAdd: '',
					phoneNumber: ''
				},
				rules: {
					name: [{
						required: true,
						message: '请输入收货人姓名',
						trigger: 'blur'
					}],
					add: [{
						required: true,
						message: '请选择地址信息',
						trigger: 'change'
					}],
					detailAdd: [{
						required: true,
						message: '请填写详细地址',
						trigger: 'blur'
					}],
					phoneNumber: [{
							required: true,
							message: '手机号码不能为空',
							trigger: 'blur'
						},
						{
							type: 'number',
							message: '手机号码必须为数字值',
							trigger: 'blur'
						}
					]
				},

				addDialogVisible: false,

				allAddressGet: [],

				selected: {
					province: '',
					city: '',
					area: '',
					town: ''
				},

				// 控制修改地址对话框的显示与隐藏，默认为隐藏
				editDialogVisible: false,
				// 查询到的地址信息对象
				editAddForm: {
					name: '',
					detailAdd: '',
					phoneNumber: ''
				},
				editAdd: {
					province: '',
					city: '',
					area: '',
					town: ''
				},


				allOrderGet: [],
				newAllOrderGet: [],

				//假定订单
				myOrders: [{
					date: '2021/07/12',
					startDate: '2021/07/15',
					endDate: '2021/08/15',
					id: '202107121',
					src: './static/images/hwmatex2.jpg',
					name: '华为mate30pro',
					brand: '华为',
					paramete: '白色/128G',
					dailyRent: '30',
					num: '1',
					pay: '1900.00',
					rent: '900.00',
					deposit: '1000.00',
					state: '待发货',
					type: 'danger',
					effect: 'dark',
					category: '数码/手机',
					customer: '王小虎夫妻店',
				}, {
					date: '2021/07/13',
					startDate: '2021/07/15',
					endDate: '2021/08/15',
					id: '202107132',
					src: './static/images/hwmatex2.jpg',
					name: '华为mate30pro',
					brand: '华为',
					paramete: '白色/256G',
					dailyRent: '40',
					num: '1',
					pay: '2400.00',
					rent: '1200.00',
					deposit: '1200.00',
					state: '待收货',
					type: '',
					effect: 'dark',
					category: '数码/手机',
					customer: '王小虎夫妻店',
				}, {
					date: '2021/07/12',
					startDate: '2021/07/15',
					endDate: '2021/08/15',
					id: '202107122',
					src: './static/images/hwmatex2.jpg',
					name: '华为mate30pro',
					brand: '华为',
					paramete: '白色/128G',
					dailyRent: '30',
					num: '1',
					pay: '1900.00',
					rent: '900.00',
					deposit: '1000.00',
					state: '租赁中',
					type: 'success',
					effect: '',
					category: '数码/手机',
					customer: '王小虎夫妻店',
				}, {
					date: '2021/07/11',
					startDate: '2021/07/15',
					endDate: '2021/08/15',
					id: '202107111',
					src: './static/images/hwmatex2.jpg',
					name: '华为mate30pro',
					brand: '华为',
					paramete: '白色/128G',
					dailyRent: '30',
					num: '1',
					pay: '1900.00',
					rent: '900.00',
					deposit: '1000.00',
					state: '待归还',
					type: 'warning',
					effect: 'dark',
					category: '数码/手机',
					customer: '王小虎夫妻店',
				}, {
					date: '2021/07/11',
					startDate: '2021/07/15',
					endDate: '2021/08/15',
					id: '202107111',
					src: './static/images/hwmatex2.jpg',
					name: '华为mate30pro',
					brand: '华为',
					paramete: '白色/128G',
					dailyRent: '30',
					num: '1',
					pay: '1900.00',
					rent: '900.00',
					deposit: '1000.00',
					state: '归还中',
					type: '',
					effect: '',
					category: '数码/手机',
					customer: '王小虎夫妻店',
				}, {
					date: '2021/07/11',
					startDate: '2021/07/15',
					endDate: '2021/08/15',
					id: '202107111',
					src: './static/images/hwmatex2.jpg',
					name: '华为mate30pro',
					brand: '华为',
					paramete: '白色/128G',
					dailyRent: '30',
					num: '1',
					pay: '1900.00',
					rent: '900.00',
					deposit: '1000.00',
					state: '已完成',
					type: 'success',
					effect: 'dark',
					category: '数码/手机',
					customer: '王小虎夫妻店',
				}],

				newTableData: [],

			};
		},

		computed: {
			// 模糊搜索
			tables() {
				const search = this.search
				if (search) {
					// filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
					// 注意： filter() 不会对空数组进行检测。
					// 注意： filter() 不会改变原始数组。
					return this.newTableData.filter(data => {
						// some() 方法用于检测数组中的元素是否满足指定条件;
						// some() 方法会依次执行数组的每个元素：
						// 如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测;
						// 如果没有满足条件的元素，则返回false。
						// 注意： some() 不会对空数组进行检测。
						// 注意： some() 不会改变原始数组。
						return Object.keys(data).some(key => {
							// indexOf() 返回某个指定的字符在某个字符串中首次出现的位置，如果没有找到就返回-1；
							// 该方法对大小写敏感！所以之前需要toLowerCase()方法将所有查询到内容变为小写。
							return String(data[key]).toLowerCase().indexOf(search) > -1
						})
					})
				}
				return this.newTableData
			},

			Orders() {
				const search = this.search
				if (search) {
					return this.newAllOrderGet.filter(data => {
						return Object.keys(data).some(key => {
							return String(data[key]).toLowerCase().indexOf(search) > -1
						})
					})
				}
				return this.newAllOrderGet
			},
			//储存将要上传的图片

		}
	}
</script>

<style lang="scss">
	.outer {
		background: #2e2f3d;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 10rpx;
	}

	.uni-column {
		width: 80%;
		display: flex;
		background: #fafafa;
		flex-direction: column;
	}

	.Drawerheader {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 30rpx;
		border-bottom: 1rpx gray solid;
		height: 50rpx;
		margin-top: 5rpx;
		padding-bottom: 5rpx;
	}

	.content {
		width: 100%;
		height: 50%;
		display: flex;
	}

	.foot {
		width: 100%;
		height: 100rpx;
	}

	.text {
		margin-left: 30rpx;
		font-size: 35rpx;
	}

	.perRow {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		height: 120rpx;
		border-bottom: 1rpx solid gray;
	}

	.drawermain {
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.img {
		margin: 10rpx;
		width: 100rpx;
		height: 100rpx;
		border-radius: 50rpx;
	}

	.tac {
		width: 30%;
		margin: 0 0 0 0;
		margin-left: 30rpx;
	}

	.main {
		display: flex;
		flex-direction: column;
		position: absolute;
		width: 100%;
		float: left;
	}

	.header {
		width: 100%;
		height: 90rpx;
		display: flex;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		position: relative;
		z-index: 10;
	}

	.logo {
		margin-left: 5%;
	}

	.navitems {
		margin: auto;
		display: flex;
		margin-right: 5%;
	}

	.navitem {
		font-size: 15px;
		margin-left: 50rpx;
	}

	.tabs {
		height: 710px;
	}

	.publish {
		transform: translateX(875px);
	}

	//订单
	.demo-table-expand {
		font-size: 0;
	}

	.demo-table-expand label {
		width: 90px;
		color: #ff0000;
	}

	.demo-table-expand .el-form-item {
		/* margin-top: 1000; */
		margin-right: 0;
		margin-bottom: 0;
		width: 23%;
	}

	//地址界面面包屑导航条
	.breadcrumb {
		width: 100%;
		background-color: #EEEEEE;
		height: 30px;
	}

	.breadcrumb_content {
		display: flex;
		width: 100%;
	}

	//地址界面新建地址
	.newAddress {
		display: flex;
		width: 50%;
		margin-top: 20px
	}

	.form {
		margin-top: 50px;
	}

	.formItemsHeight {
		height: 50px;
	}

	.name_input {
		width: 300px;
	}


	.goodsSettings {
		.goodsSettingsDiv {
			width: 100%;
			overflow: hidden;

			.el-input__inner {
				border: none;
			}
		}

		width: 60%;
	}

	.show_button {
		width: 200px;
	}
</style>
